<template>
  <div class="App">
    父组件{{ color }} {{ sonInfo.name }}-{{ sonInfo.age }}
    <button @click="change">修改信息，看子组件中是否跟着修改</button>
    <SonCon></SonCon>
  </div>
</template>

<script>
import SonCon from "./components/SonCon.vue";
export default {
  // 使用provide方法给子组件和孙组件提供数据
  provide() {
    return {
      color: this.color,
      sonParam: this.sonParam,
      sonInfo:this.sonInfo
    };
  },
  components: {
    SonCon,
  },
  methods:{
    change(){
      this.color = 'blue',
      this.sonInfo.name = 'lisi'
    }
  },
  data() {
    return {
      color: "pink", // 简单类型 数据不是响应式的 ，父组件修改子组件不会跟着修改
      sonParam: "测试参数",
      sonInfo: {
        // 复杂类型数据是响应式的，父组件中修改子组件中也会跟着修改
        name: "zs",
        age: 23,
      },
    };
  },
};
</script>

<style>
.App {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>